<template>
  <component :is="iconComponent" :style="iconStyle" />
</template>
<script lang="ts" setup>
const props = defineProps({
  fileName: {
    type: String,
    required: true
  },
  size: {
    type: String,
    default: '36px'
  }
});
// 文件类型与图标映射
const fileIconMap = {
  doc: { component: FileWordFilled, color: '#1e90ff' },
  docx: { component: FileWordFilled, color: '#1e90ff' },
  pdf: { component: FilePdfFilled, color: '#ff6a6a' },
  xls: { component: FileExcelFilled, color: '#32cd32' },
  xlsx: { component: FileExcelFilled, color: '#32cd32' },
  png: { component: FileImageFilled, color: '#ffe4b5' },
  jpeg: { component: FileImageFilled, color: '#ffe4b5' },
  jpg: { component: FileImageFilled, color: '#ffe4b5' },
  default: { component: FileUnknownFilled, color: 'gray' }
};

// 获取文件扩展名
const fileExtension = (fileName) => {
  const lastIndex = fileName.lastIndexOf('.');
  return fileName.substring(lastIndex + 1).toLowerCase();
};

// 获取图标组件
const iconComponent = computed(() => {
  const extension = fileExtension(props.fileName);
  return fileIconMap[extension]?.component || fileIconMap.default.component;
});

// 获取图标样式
const iconStyle = computed(() => {
  const extension = fileExtension(props.fileName);
  const color = fileIconMap[extension]?.color || fileIconMap.default.color;
  return { color, fontSize: props.size };
});
</script>
